<!DOCTYPE HTML>

<html>

	<head>
  
		<style>
		 body {
			margin: 0px;
			padding: 0px;
		  }
		  #myCanvas {
			border: 1px solid #9C9898;
		  }
		</style>
	
		<script src="jquery.js"></script>
		<script type="text/javascript">
		
			window.onload = function() {
			
			var canvas = document.getElementById("myCanvas");
			var context = canvas.getContext("2d");
			var c = document.getElementById("myCanvas");
			var cxt = c.getContext("2d");
			context.lineWidth = 15;
			
				$(function(){
				
					var point1 = new Array();
					point1['x'] = false;
					point1['y'] = false;
					var point2 = new Array();
					point2['x'] = false;
					point2['y'] = false;
			
					$(document).click(function(e){
					
						if ( false === point1['x'] || false === point1['y']) {

							var posX1 = e.pageX;
							var posY1 = e.pageY;
									
							point1['x'] = posX1;
							point1['y'] = posY1;
											
							return;
											
						}
									
						else if ( false === point2['x'] || false === point2['y'] ) {
										
							var posX2 = e.pageX;
							var posY2 = e.pageY;

							point2['x'] = posX2;
							point2['y'] = posY2;
							console.log("second");

							cxt.moveTo(point1['x'], point1['y']);
							cxt.lineTo(point2['x'], point2['y']);
							cxt.stroke();
										
							point1['x'] = point2['x'];
							point1['y'] = point2['y'];	
							point2['x'] = false;
							point2['y'] = false;
									
						}
									
					});
					
				});
				
			}

		</script>
	
	</head>
  
	<body>
		<canvas id="myCanvas" width="1200" height="600"></canvas>
	</body>
  
</html>